<template>
  <div class="app">
    <div class="box">
      一些的嘿嘿打得过
      该喝喝诶个hi而过黑给个黑共和国四个合格俄国和IE很高IE很高IEhi个很高IE个IC阿尔戈欧冠
    </div>
    <div class="box-2">
      <ul class="ul">
        <li>111111111</li>
        <li>22222222</li>
      </ul>
    </div>
    <div class="box-3">
      <button>点击</button>
      <button class="default">浏览器默认</button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
</script>

<style scoped>
.app {
  display: flex;
}
.box {
  width: 100px;
  border: 1px solid red;
  line-height: 2;
  /* initial 设置默认值; 适合任意css属性  */
  /* line-height: initial; */
  /* 两者是一样的 */
  /* line-height: normal; */
}

.ul {
  /* ul 标签有默认值 padding  margin 等属性；使用 unset 值 可以去掉默认值  */
  padding: unset;
  margin: unset;
  /* 如果需要去掉所有的默认属性 也可以 all: unset */
  /* all: unset; */
}
.ul li {
  /* all: unset; */
}

.box-3 {
  display: flex;
  align-items: flex-start;
  grid-gap: 10px 10px;
}

button {
  all: unset;
  padding: 4px 10px;
  /* border: 1px solid #f00; */
  border-radius: 4px;
  background-color: #409eff;
  color: #fff;
}
.default {
  /* revert 让标签回到浏览器默认样式 */
  all: revert;
}
</style>
